<script setup lang='ts'>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import setUpTime from '@/utils/setUpTime'
import * as signalR from '@microsoft/signalr'
import { ALL } from '@/api/baseUrl'
import { GetHandHeldRecordList } from '@/api/publicApi'

// 定义变量
// 表格
const tableData: any = ref([])

const cellStyle = {
  textAlign: 'center'
}

const headStyle = {
  textAlign: 'center'
}

// 分页
const pageInfo = ref({
  total: 100,
  pageSize: 10,
  pageNum: 1
})

// 定义函数
onMounted(() => {
  getElectricalInfoList()
  // getInclinomenterSignalRData()
})
// 获取列表数据
const getElectricalInfoList = () => {
  let params = {
    BarWheelMachineCode: localStorage.BarWheelMachineCode,
    BwmCode: localStorage.BarWheelMachineCode
  }
  GetHandHeldRecordList(params).then(res => {
    tableData.value = res.result
    tableData.value[0].lastModificationTime = setUpTime.formatTime(tableData.value[0].lastModificationTime)
  }).catch((error: any) => {
    ElMessage({
      type: 'error',
      message: `${error.message}`
    })
  })
}

// 获取设备实时数据
const getInclinomenterSignalRData = () => {
  // 获取设备测点实时数据
  var connection = new signalR.HubConnectionBuilder()
    // .withUrl(`${ALL}/signalr`, {
    //   skipNegotiation: true,
    //   transport: signalR.HttpTransportType.WebSockets
    // })
    .build()
  connection.start()
  connection.on('updateMems', message => {
    let {
      LastModificationTime,
      DeviceCode,
      DeviceName,
      PositionDescription,
      ProgamException,
      ProgramMessage,
      XValue,
      YValue,
      BarWheelMachineCode
    } = JSON.parse(message)
    if (BarWheelMachineCode === localStorage.BarWheelMachineCode) {
      tableData.value.forEach(item => {
        if (item.deviceCode === DeviceCode) {
          (item.deviceName = DeviceName),
          (item.XValue = XValue),
          (item.YValue = YValue),
          (item.positionDescription = PositionDescription),
          (item.progamException = ProgamException),
          (item.programMessage = ProgramMessage),
          (item.lastModificationTime =
              setUpTime.formatTime(LastModificationTime))
        }
      })
    }
    // 按时间排序
    tableData.value.sort(function (a, b) {
      return b.creationTime < a.creationTime
    })
  })
  connection.onclose(() => setTimeout(() => {
    connection.start()
  }, 5000))
}

</script>

<template>
  <div class="inclinometer-main-box">
    <div class="table-box">
      <el-table
        :cell-style="cellStyle"
        :header-cell-style="headStyle"
        :data="tableData"
        max-height="600"
        size="small"
      >
        <el-table-column
          prop="handHeldMeasurePointName"
          label="手持传感器测点"
        />
        <el-table-column
          prop="date"
          label="值"
        >
          <template #default="scope">
            <div class="data-box">
              <div>
                震动值：{{ scope.row.shockValue }}(m/s²)
              </div>
              <div>
                温度值：{{ scope.row.temperValue }}(℃)
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="deviceName"
          label="所属设备"
        />
        <el-table-column
          prop="lastModificationTime"
          label="更新时间"
        />
      </el-table>
    </div>
    <!-- <div class="pagination-box">
      <el-pagination
        v-model:current-page="pageInfo.pageNum"
        v-model:page-size="pageInfo.pageSize"
        :page-sizes="[5, 10, 15, 20]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageInfo.total"
        @size-change="handlePlanSizeChange"
        @current-change="handlePlanCurrentChange"
      />
    </div> -->
  </div>
</template>

<style lang="scss" scoped>
.inclinometer-main-box {
  width: 100%;
  height: 100%;
  background-color: #fff;

  .table-box {
    padding: 0 15px;
    padding-top: 20px;

    .data-box {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;

      /* border: 1px solid red; */

      >div {
        display: flex;
        justify-content: flex-start;
        width: 40%;
        margin: 0 20%;

        /* border: 1px solid green; */
      }
    }
  }

  .pagination-box {
    margin-top: 10px;
  }
}
</style>